<template>
	<view class="main" v-if="detailData">
		<scroll-view class="scroll-view_list" scroll-y="true">
			<view class="mian_content">
				<view class="" v-for="(item,index) in detailData.codeScanInfo" :key="index">
					<view class="top_header">
						<!-- 基础选项 -->
						<view v-if="item.type==1">
							<view class="main_top">
								<image :src="item.data[1].val" v-if="item.data[1].dataType==3" class="top_img"></image>
								<view class="text" v-if="item.data[2].dataType==2">{{item.data[2].val}}</view>
							</view>
							<template class="" v-for="(i,n) in item.data" :key="n">
								<!-- 轮播图 -->
								<view class="uni-margin-wrap" v-if="i.dataType==0&&i.show">
									<uni-swiper-dot :info="detailData.infoVal.goodsImage"
										v-if="detailData.infoVal.goodsImage.length>0">
										<swiper autoplay="3000" @change="changeCurrent" :indicator-dots="true"
											indicator-active-color="#fff" indicator-color="#d9d9d9">
											<swiper-item v-for="(image,index) in detailData.infoVal.goodsImage"
												:key="index">
												<image :src="image" class="img" mode="aspectFit"></image>
											</swiper-item>
										</swiper>
									</uni-swiper-dot>
									<view v-else class="void_goods">
										<image class="img" src="/static/goods.svg" mode="aspectFit"></image>
										<view class="tip">暂无图片</view>
									</view>
								</view>
								<!-- 登记、报修按钮 -->
								<view class="btn" v-if="i.dataType==4&&i.show&&!detailData.infoVal.register">
									<button class="btn_a " type="primary">
										<span>{{i.val}}</span>
									</button>
								</view>
								<view class="btn" v-if="i.dataType==5&&i.show">
									<button class="btn_b " type="primary" @click="goAddOrder">
										<span>{{i.val}}</span>
									</button>
								</view>
							</template>
						</view>
						<!-- 3商品信息 -->
						<view class="goods_info" v-if="item.type==3">
							<view v-for="(i,t) in setData(item.data)" :key="t">
								<view class="spec_num" v-if="i.dataType==23">
									<view v-for="(d,n) in i.data" :key="n" class="s_n">
										<span v-if="d.show">{{d.name+'：'}} <span
												class="cont_tip">{{goodsInfo(d)}}</span></span>
									</view>
								</view>
								<view :class="{info:i.dataType==1}" v-else-if="i.show&&!(i.dataType==4)">
									<span>{{i.dataType==4||i.dataType==1?'':i.name+':'}}</span>
									<span :class="{price:i.dataType==4}"
										:style="{color:i.dataType==4?detailData.codeScanInfo[0].data[0].val?detailData.codeScanInfo[0].data[0].val:'#007cff':''}">{{goodsInfo(i)}}
									</span>
								</view>
							</view>
						</view>
						<!-- 4-防伪编码 -->
						<view class="" v-if="item.type==4">
							<view class="code_btn" v-if="item.data[0].show">
								<view class="">
									{{item.data[0].name}}: <span
										:style="{color:detailData.codeScanInfo[0].data[0].val?detailData.codeScanInfo[0].data[0].val:'#007cff'}">{{detailData.infoVal.securityCode}}</span>
								</view>
								<view @click="copy(detailData.infoVal.securityCode)" class="btn_c"
									:style="{background:detailData.codeScanInfo[0].data[0].val?detailData.codeScanInfo[0].data[0].val:'#007cff',color:'#fff'}">
									复制</view>
							</view>
						</view>
						<!-- 5-商品编码信息 -->
						<view class="code_info" v-if="item.type==5">
							<view class="bg" v-for="(i,index) in item.data" :key="index">
								<template v-if="i.show">
									<view class="tip">{{i.name+':'}}&nbsp;&nbsp;<span
											class="cont_tip">{{getCodeInfo(i)}}</span>
									</view>
								</template>
							</view>
						</view>
						<!-- 6-商品编码登记信息 -->
						<view class="code_info" v-if="item.type==6">
							<view class="bg" v-for="(i,index) in item.data" :key="index">
								<template v-if="i.show">
									<view class="tip">{{i.name+':'}}&nbsp;&nbsp; <span
											class="cont_tip">{{getCodeRegisterInfo(i)}}</span></view>
								</template>
							</view>
						</view>
						<!-- 8商品简介与参数说明 -->
						<view class="control_tab" v-if="item.type==8">
							<uni-segmented-control :current="current" :values="setCurrent(item.data)" style-type="text"
								:active-color="detailData.codeScanInfo[0].data[0].val?detailData.codeScanInfo[0].data[0].val:'007cff'"
								@clickItem="onClickItem($event,item.data)" />
							<view>
								<view v-show="current === 0" style="font-size: 28rpx;">
									<rich-text v-html="detailData.infoVal.goodsContent"></rich-text>
								</view>
								<view v-show="current === 1" class="param-field">
									<view v-show="paramFields.name">
										<view class="field-title">{{ paramFields.name }}：</view>
										<view v-for="item in paramFields.paramFields" class="field-value">
											<text>{{ item.name }}：</text>
											<image class="field-value-image" v-if="item.type === 5 || item.type === 6"
												v-for="o in item.optVos" :key="o.id" :src="o.optValue" />
											<video class="field-value-image" v-else-if="item.type === 7"
												v-for="o in item.optVos" :key="o.id" :src="o.optValue" />
											<text v-else>{{ item.optVos.map(o => o.optValue).join('、') }}</text>
										</view>
									</view>
									<view v-show="paramFields.customParams && paramFields.customParams.length > 0">
										<view class="field-title">其他参数：</view>
										<view v-for="item in paramFields.customParams" class="field-value">
											<text>{{ item.name }}：</text>
											<text>{{ item.val }}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<!-- 9-->
						<view class="control_tab_" v-if="item.type==9">
							<view class="param-field">
								<view v-for="(i,index2) in item.data" :key="index2" v-if="item.fieldType==1" v-show="i.show"
									class="field-value">
									<view class="header_title" :style="`justifyContent:${i.align==1?'flex-start':i.align==2?'center':'flex-end'}`">
										<view class="title_text">
											{{i.name}}
										</view>
									</view>
									<span class="text_content">{{ i.val }}</span>
								</view>
								<view v-for="(i,index2) in item.data" :key="index2" v-if="item.fieldType==2" v-show="i.show"
									class="field-value">
									<view class="header_title" :style="`justifyContent:${i.align==1?'flex-start':i.align==2?'center':'flex-end'}`">
										<view class="title_text">
											{{i.name}}
										</view>
									</view>
									<image class="field-value-image" @click="lookImg(i.val)" :src="i.val" mode="aspectFill" />
								</view>
								<view v-for="(i,index2) in item.data" :key="index2" v-if="item.fieldType==3" v-show="i.show"
									class="field-value">
									<view class="header_title" :style="`justifyContent:${i.align==1?'flex-start':i.align==2?'center':'flex-end'}`">
										<view class="title_text">
											{{i.name}}
										</view>
									</view>
									<span class="text_content">{{ i.val }}</span>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 弹出申请方式-->
		<wayType ref="wayTypeRef" @value-change="addWorkor" :showpopup="showBottom">
		</wayType>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { onLoad, onUnload } from '@dcloudio/uni-app'
	import apiOrder from '@/util/api/order.js'
	import apiGoods from '@/util/api/goods.js'
	import store from '@/store/index.js'
	import apiCode from "@/util/api/code"
	import wayType from "@/components/u-user/wayType.vue"
	const detailData = ref(null)
	const currentImg = ref(0)
	const showBottom = ref(null) //申请工单弹窗
	const wayTypeRef = ref()
	const current = ref(0)
	const currentIndex = ref(1)
	const paramFields = ref({ // 参数字段
		name: '', // 参数名称
		paramFields: [], // 参数字段
		customParams: [] // 自定义参数
	})
	// 通过onLoad接收数据
	onLoad((e) => {
		if (e?.custCode) {
			uni.setStorageSync('custCode', e?.custCode)
		}
		if (e.id) {
			getDetail(e.id)
		}
	})
	onUnload(() => {
		uni.hideLoading()
	})
	// 预览图片
	const lookImg = (url) => {
		uni.previewImage({
			urls: [url],
		})
	}
	// 获取标题头
	const setCurrent = (val) => {
		let tem = []
		val.filter(o => {
			if (o.show) {
				tem.push(o.val)
			}
		})
		return tem
	}
	// 选择申请方式
	const addWorkor = (item) => {
		store.commit('setWayType', {
			id: item.id,
			name: item.name,
			type: item.type//1安装
		})
		showBottom.value = false
		uni.navigateTo({
			url: "/pages_user/home/add?code=" + detailData.value.infoVal.securityCode
		})
	}

	// 报单弹窗
	const goAddOrder = async () => {
		store.commit('setorderGoodsTypes', [])
		store.commit('setchackFaultList', [])
		store.commit('setchackFaultItem', { id: null })
		store.commit('setWayType', {})
		store.commit('setcheckBrandItem', { id: null })
		store.commit('setcheckClassifyItem', { id: null })
		store.commit('setappointmentTime', null)
		store.commit('setUserOrder', {
			"address": "", //客户详细地址
			"area": "", //地址-县/区
			"city": "", //地址-市
			"helpOtherCreateOrder": false, //	是否代他人建单：0-否，1-是
			"name": "", //客户姓名
			"otherPhone": "", //其他电话
			"phone": "", //客户手机号
			"province": "", //地址-省
			"town": "", //地址-镇
			"userId": null
		})
		await wayTypeRef.value.open(0)
		showBottom.value = true
	}
	// 获取商品信息
	const goodsInfo = (val) => {
		switch (val.dataType) {
			case 1:
				// 1-商品品牌，2-商品分类，3-商品名称，4-商品型号
				let tem = ''
				val.val.forEach(o => {
					if (o == 1) {
						tem += detailData.value.infoVal.goodsBrand + ' '
					} else if (o == 2) {
						tem += detailData.value.infoVal.goodsType + ' '
					} else if (o == 3) {
						tem += detailData.value.infoVal.goodsName + ' '
					} else if (o == 4) {
						tem += detailData.value.infoVal.goodsModel + ' '
					}
				})
				return tem
			case 2:
				return detailData.value.infoVal.goodsSpecName
			case 3:
				return detailData.value.infoVal.goodsItemNumber
			case 4:
				return "￥" + detailData.value.infoVal.goodsPrice.toFixed(2)
		}
	}
	// 处理商品信息
	const setData = (val) => {
		let tem = val.splice(1, 2)
		val.splice(1, 0, { data: tem, dataType: 23 })
		return val
	}
	// 获取编码信息
	const getCodeInfo = (val) => {
		/* 1- 编码是否激活，2-编码激活时间，3-编码状态，4-编码质保开始时间，
		5-编码质保到期时间，6-编码登记时间，7-编码查询次数，8-首次查询时间，
		9-最后查询时间，10-产品入库时间，11-产品出库时间，12-销售经销商 */
		switch (val.dataType) {
			case 1:
				return detailData.value.infoVal.activa ? '已激活' : '未激活'
			case 2:
				return detailData.value.infoVal.activaTime
			case 3:
				let num = detailData.value.infoVal.codeStatus
				return num == 1 ? '未质保' : num == 2 ? '质保中' : num == 3 ? '已过保' : '已作废'
			case 4:
				return detailData.value.infoVal.warrantyStartTime
			case 5:
				return detailData.value.infoVal.warrantyEndTime
			case 6:
				return detailData.value.infoVal.registerTime
			case 7:
				return detailData.value.infoVal.selectNum + '次'
			case 8:
				return detailData.value.infoVal.firstSelectTime
			case 9:
				return detailData.value.infoVal.lastSelectTime
			case 10:
				return detailData.value.infoVal.inboundTime
			case 11:
				return detailData.value.infoVal.outboundTime
			case 12:
				return detailData.value.infoVal.saleNetwork
		}
	}
	// 
	const getCodeRegisterInfo = (val) => {
		// 1- 客户登记姓名，2-客户登记手机号，3-客户登记地址
		switch (val.dataType) {
			case 1:
				return detailData.value.infoVal.userName
			case 2:

				return detailData.value.infoVal.userPhone
			case 3:
				let m = detailData.value.infoVal
				return [m.province , m.city , m.area , m.town , m.address].filter(o=>o).join('')
		}
	}
	// 点击标题
	const onClickItem = (val : { currentIndex : number; }, item) => {
		let tem = item.filter(o => {
			if (o.show) {
				return o
			}
		})
		currentIndex.value = tem[val.currentIndex].dataType
		current.value = val.currentIndex
		if (val.currentIndex == 1) {
			getGoodsParamFieldApi()
		}
	}
	const changeCurrent = (e) => {
		currentImg.value = e.detail.current;
	}
	// 获取商品详情
	const getDetail = async (id) => {
		if (!id) return
		uni.showLoading({
			title: '加载中...'
		})
		await apiCode.getUserCodeDetail(id).then((res : { code : number; data : any; }) => {
			if (res.code === 20000) {
				//数组预处理
				let tem = res.data.row.codeScanInfo.splice(1, 1)//获取商品图片数组
				let item = res.data.row.codeScanInfo[0].data.splice(1, 1)	//获取右侧数组
				res.data.row.codeScanInfo[0].data.splice(2, 0, item[0], tem[0].data[0])//添加到对应位置
				detailData.value = res.data.row
			}
		})
		uni.hideLoading()
	}
	// 获取商品参数
	const getGoodsParamFieldApi = async () => {
		uni.showLoading({
			title: '加载中...'
		})
		await apiGoods.getGoodsParamField(detailData.value.infoVal.goodsId).then((res : { code : number; data : any; }) => {
			if (res.code === 20000) {
				paramFields.value = res.data.row
			}
		})
		uni.hideLoading()
	}
	// 复制
	const copy = (val : any) => {
		uni.setClipboardData({
			data: val,
			success: function () {
				//调用方法成功
				uni.showToast({
					title: '已复制',
					icon: 'none'
				})
			},
		})
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f6f7fa;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		overflow-y: hidden;
		display: flex;
		flex-direction: column;

		.scroll-view_list {
			height: 100%;
			flex: 1;

			::-webkit-scrollbar {
				display: none;
				width: 0 !important;
				height: 0 !important;
				-webkit-appearance: none;
				background: transparent;
				color: transparent;
			}

			.mian_content {
				padding-bottom: 200rpx;
			}
		}

		.top_header {
			background: #f9f9f9;

			.main_top {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 90rpx;
				width: calc(100% - 48rpx);
				background-color: #fff;
				padding: 0 24rpx;
				box-shadow: 0 0 20rpx 3rpx #eee;
				margin-bottom: 20rpx;

				.top_img {
					width: 60rpx;
					height: 60rpx;
				}

				.text {
					font-size: 28rpx;
				}
			}

			.uni-margin-wrap {
				border-radius: 14rpx;
				// box-shadow: 0 0 20rpx 6rpx #dcdcdc;
				margin: 20rpx 0;

				.dot_img {
					position: absolute;
				}

				:deep(uni-swiper) {
					height: 420rpx;
					border-radius: 14rpx;
					overflow: hidden;

				}

				/* #ifdef MP-WEIXIN */
				swiper {
					height: 420rpx;
					border-radius: 14rpx;
					overflow: hidden;
				}

				/* #endif */

				.img {
					width: calc(100% - 24rpx);
					height: calc(100% - 24rpx);
					padding: 12rpx;
				}

				.void_goods {
					display: flex;
					align-items: center;
					flex-direction: column;
					justify-content: center;
					height: 420rpx;
					background-color: #fff;
					border-radius: 10rpx;

					.img {
						width: 60%;
						height: 200rpx;
					}

					.tip {
						color: #aaa;
						font-size: 28rpx;

					}
				}
			}

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx 24rpx;
				margin-bottom: 20rpx;

				.btn_a {
					width: 100%;
					height: 80rpx;
					border-radius: 8rpx;
					line-height: 80rpx;
					font-size: 28rpx;
				}

				.btn_b {
					width: 100%;
					background-color: #007cff;
					height: 80rpx;
					border-radius: 8rpx;
					line-height: 80rpx;
					font-size: 28rpx;
				}
			}



			.goods_info {
				background-color: #fff;
				margin-bottom: 20rpx;
				padding: 24rpx;
				font-size: 28rpx;
				// color: #999;
				font-size: 24rpx;

				.spec_num {
					display: flex;
					align-items: center;

					.s_n:first-child {
						margin-right: 20rpx;

					}

					.cont_tip {
						color: #000;
					}
				}

				.info {
					font-size: 28rpx;
					color: #000;
					margin-bottom: 12rpx;
				}

				.price {
					font-weight: bold;
					font-size: 36rpx;
					height: 80rpx;
					line-height: 80rpx;
				}
			}

			.code_btn {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff;
				padding: 12rpx 24rpx;
				font-size: 28rpx;
				margin-bottom: 20rpx;

				.btn_c {
					border-radius: 4rpx;
					height: 40rpx;
					line-height: 40rpx;
					padding: 4rpx 16rpx;
					font-size: 24rpx;
				}
			}

			.code_info {
				background: #f9f9f9;
				padding-bottom: 20rpx;

				.bg {
					font-size: 26rpx;
					background-color: #fff;
					color: #777;
					padding: 0 24rpx;

					.tip {
						padding: 8rpx 0;

						.cont_tip {
							color: #000;
						}
					}

					&:first-child {
						padding-top: 10rpx;
					}

					&:last-child {
						padding-bottom: 14rpx;
					}

				}

			}

			.control_tab {
				background: #f9f9f9;
				padding: 0 10rpx 24rpx;

				:deep(.segmented-control) {
					background-color: #fff;

				}

				.param-field {
					font-size: 28rpx;
					padding: 24rpx;
					background-color: #fff;

					.field-title {
						font-size: 28rpx;
					}

					.field-value {
						font-size: 24rpx;
						color: #777;

						.field-value-image {
							width: 90px;
							height: 90px;
						}
					}
				}
			}
			.control_tab_ {
				background: #f9f9f9;
				padding: 0 10rpx 24rpx;
			
				.param-field {
					padding: 24rpx;
					background-color: #fff;
			
					.field-value {
						.header_title{
							border-bottom: 1px solid #eee;
							display: flex;
							margin-bottom: 24rpx;
							padding: 0 24rpx;
							box-sizing: border-box;
							.title_text {
								padding-bottom: 10rpx;
								border-bottom: 4rpx solid #007cff;
								font-size: 28rpx;
								color: #007cff;
							}
						}
						.text_content {
							white-space: pre-wrap;
							word-wrap: break-word;
							word-break: break-all;
							font-size: 28rpx;
							color: #777;
						}
			
						.field-value-image {
							width: 90px;
							height: 90px;
						}
					}
			
					
			
					
				}
			}
		}

		.popup_way {
			height: 60vh;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #fff;
			padding-bottom: 100rpx;

			.text_top_popup {
				text-align: center;
				font-size: 32rpx;
				padding: 20rpx 0;
				font-weight: bold;

				.icon {
					position: absolute;
					right: 40rpx;
					font-weight: 500;
				}
			}

			.height_list {
				height: 100%;
				overflow: auto;

				.way_name {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 28rpx;
				}
			}
		}
	}
</style>